<template>
  <!-- 安全责任指标考核记录列表 -->
  <base-breadcrumb>
    <searchData :searchData="searchOptions" :refreshCom="true" @search="handleSearch" />
    <div class="page-body">
      <a-card :bordered="false">
        <title-name title="安全责任指标考核" />
        <div class="table-operateors mb20">
          <a-button type="primary" icon="plus" @click="handleUpdate('add')" v-btnPermission="'hse_016_add_07'">新增上报</a-button>
        </div>
        <a-alert class="mb12" type="info" show-icon>
          <template slot="message">
            <span>人员总数：<a>{{countFrom?countFrom.totalNum:0}}</a>人，
              本月已打分数：<a>{{countFrom?countFrom.scoreEdNum:0}}</a>人，
              待打分数：<a>{{countFrom?countFrom.scoreTodoNum:0}}</a>人，
              待提交审核：<a>{{countFrom?countFrom.draftNum:0}}</a>人，
              审核中：<a>{{countFrom?countFrom.submittedNum:0}}</a>人，
              审核通过：<a>{{countFrom?countFrom.paseNum:0}}</a>人，
              审核不通过：<a>{{countFrom?countFrom.rejectedNum:0}}</a>人
            </span>
          </template>
        </a-alert>
        <s-table
          ref="table"
          size="default"
          rowKey="id"
          :columns="columns"
          :data="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
        >
          <!-- <template slot="auditStatus" slot-scope="text, record">
            <StatusDisplay :status-code="record.auditStatus" />
          </template> -->
                          <span slot="auditStatus" slot-scope="text, record">
                    <list-status :status="record.auditStatus"  :isApproval="true" conversion="en" :text="text"></list-status>
                </span>
          <template slot="operator" slot-scope="text, record">
            <a class="base-btn" @click="handleUpdate('look', record)" v-btnPermission="'hse_016_loo_010'">查看</a>

            <a class="base-btn" @click="handleUpdate('edit', record)"  v-btnPermission="'hse_016_edi_08'" v-if="selfBtnShow(record.creatorId)&&(record.auditStatus == 'DRAFT' || record.auditStatus == 'REJECTED')">编辑</a>

            <a v-if="record.auditStatus && record.auditStatus !== 'DRAFT'" @click="toggleApprovalDetails(record)" v-btnPermission="'hse_016_moi_08'">审批信息</a>
          </template>
        </s-table>
      </a-card>
    </div>
    <ApprovalDetails :visible="visible.approvalDetails" :businessId="childInitData.id" @cancel="visible.approvalDetails = false" @confirm="visible.approvalDetails = false"/>
  </base-breadcrumb>
</template>

<script>
import ApprovalDetails from '@/components/approvalDetails'
import TreeSelectJob from '@/components/TreeSelectOrganization/jobs.vue'
import TreeSelectOrganization from '@/components/TreeSelectOrganization'
import StatusDisplay from '@/components/StatusDisplay'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import OrgTreeSelect from '@/components/OrgTreeSelect'
import { STable } from '@/components'
import { getExamRecordList, GetCount } from '@/api/safetySupervision/examRecord.js'
import Vue from 'vue'

const monthList = Array.from({ length: 12 }, (k, i) => {
  return {
    label: `${i + 1}月`,
    value: i + 1,
  }
})
const searchOptions = [
  // {
  //   name: '所属分公司',
  //   valueKey: 'branchComId',
  //   type: SelectSubCompany,
  // },
      {
        name: '所属单位',
        valueKey: 'searchQuery',
        type: OrgTreeSelect,
      },
  // {
  //   name: '所属项目',
  //   keyValue: 'branchComId',
  //   valueKey: 'projectId',
  //   type: SelectProject,
  // },
  {
    name: '考核月份',
    value: 'month',
    type: 'select',
    data: monthList,
  },
  {
    name: '姓名',
    value: 'assessedEmployeeName',
    type: 'input',
  },
  {
    name: '填报时间',
    value: 'applyTime',
    type: 'dateRange',
  },
  {
    name: '状态',
    value: 'auditStatus',
    type: 'select',
    data: typeListApproval,
  },
]
import { typeListApproval } from '@/utils/util'
const columns = [
  {
    title: '姓名',
    dataIndex: 'assessedEmployeeName',
  },
  {
    title: '岗位',
    dataIndex: 'jobName',
  },
  {
    title: '部门',
    dataIndex: 'deptName',
  },
  {
    title: '考核月份',
    dataIndex: 'month',
  },
  {
    title: '得分',
    dataIndex: 'totalScorePercent',
  },
  {
    title: '排名',
    dataIndex: 'rank',
  },
  {
    title: '所属分公司',
    dataIndex: 'branchComName',
  },
  {
    title: '所属项目',
    dataIndex: 'projectName',
  },
  {
    title: '状态',
    dataIndex: 'auditStatus',
    scopedSlots: { customRender: 'auditStatus' },
  },
  {
    title: ' 操作',
    dataIndex: 'operator',
    scopedSlots: { customRender: 'operator' },
  },
]

export default {
    name:'a'+Date.now(),  components: {
    STable,
    StatusDisplay,
    ApprovalDetails
  },
  data() {
    return {
      childInitData: {},
      visible: {
        approvalDetails: false
      },
      monthList: monthList,
      searchOptions: searchOptions,
      columns: columns,
      queryParam: {},
      countFrom:{},
      loadData: async (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        const [err, res] = await getExamRecordList(requestParameters)
        return new Promise((resolve, reject) => {
          if (err) {
            reject(err)
          } else {
            resolve(res)
          }
        })

      },
    }
  },
  methods: {
    toggleApprovalDetails(data) {
      this.childInitData = { ...data }
      this.visible.approvalDetails = true
    },
    handleSearch(val = {}) {
      const year = (new Date()).getFullYear()
      this.queryParam = {
        ...val,
        month: val.month ? `${year}-${val.month < 10 ? '0' + val.month : val.month}` : void 0,
        createTimeBegin:
          (val.applyTime && val.applyTime.length && val.applyTime[0].format('YYYY-MM-DD HH:mm:ss')) || void 0,
        createTimeEnd:
          (val.applyTime && val.applyTime.length && val.applyTime[1].format('YYYY-MM-DD HH:mm:ss')) || void 0,
      }
      this.$refs.table.refresh(true)
      this.handleCount(this.queryParam)
    },
    // 处理更新操作（新增、编辑）
    handleUpdate(type, data = {}) {
      this.$router.push({
        name: 'UpdateRecord',
        query: {
          pageType: type,
          id: data.id || '',
          auditStatus: data.auditStatus || '',
          finalId: data.finalId || ''
        },
      })
    },
    async handleCount(queryParam){
      const [err, res] = await GetCount(queryParam)
      if(!err) {
        this.countFrom = res.data
      }
    }
  },
  mounted(){
    this.handleCount(this.queryParam)
  }
}
</script>

<style lang="less" scoped>
.page-header {
  .header-row {
    display: flex;
    .flex-content {
      flex: auto;
    }
    .divider {
      margin: 0 12px;
    }
    .expand-btn {
      margin-left: 8px;
      font-size: 14px;
    }
  }
}
.page-body {
  .table-operateors {
    .ant-btn + .ant-btn {
      margin-left: 12px;
    }
  }
}
</style>
